<template>
	<div class="margin-bottom-10" style="height: 110px;display: flex;justify-content: center;align-items: center;">
		<div style="width: 380px;height: 100%;border: solid 1px #e8eaec;border-radius: 6px;background: #fff;display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 10px 12px;">
			<div style="font-size: 16px;margin-bottom: 10px;display: flex;flex-direction: column;justify-content: center;align-items: center;">
				<span style="font-weight: 700;">今日累计报工</span>
				<div style="font-size: 18px;font-weight: bold;">
					<countTo :start-val="0" :end-val="toDayQty" :duration="3000"></countTo>
				</div>
			</div>
			<el-popover
				title="产量和能耗趋势"
				placement="bottom"
				width="400"
				trigger="click"
			>
				<statistic-chart :chart-data="chartData" style="height: 200px;"></statistic-chart>
				<div slot="reference" class="el-icon-s-marketing" style="font-size: 18px;color: #2b85e4;cursor: pointer;"></div>
			</el-popover>
			<div class="flex-between-center width-100-percent" style="font-size: 12px;">
				<div class="flex-start-center">
					<span class="item-gap">较昨日: </span>
					<span :style="{ color: toDayQty > yesterdayQty ? '#19be6b' : toDayQty === yesterdayQty ? '#515a6e' : '#ed4014' }">{{ `${ toDayQty > yesterdayQty ? `↑` : toDayQty === yesterdayQty ? `--` : `↓` }${yesterdayQtyRatio === 0 ? '' : `${Math.abs(yesterdayQtyRatio)}%`} (${yesterdayQty})` }}</span>
				</div>
				<div class="flex-start-center">
					<span class="item-gap">较前日: </span>
					<span :style="{ color: toDayQty > beforeYesterdayQty ? '#19be6b' : toDayQty === beforeYesterdayQty ? '#515a6e' : '#ed4014' }">{{ `${ toDayQty > beforeYesterdayQty ? `↑` : toDayQty === beforeYesterdayQty ? `--` : `↓` }${beforeYesterdayQtyRatio === 0 ? '' : `${Math.abs(beforeYesterdayQtyRatio)}%`} (${beforeYesterdayQty})` }}</span>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
    import countTo from 'vue-count-to';
    import statisticChart from './statistic-chart';
    import { productionPrdReportPage } from '../../../../../api/production/xsReport';
    import { formatDate } from '../../../../../utils/jk/jk-tool';
    import { mathJsAdd } from '../../../../../utils/jk/jk-cals';

    export default {
        components: {
            statisticChart,
            countTo
        },
        props: {
            payloadData: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        data() {
            return {
                chartData: [],
                toDayQty: 0,
                yesterdayQty: 0,
                yesterdayQtyRatio: 0,
                beforeYesterdayQty: 0,
                beforeYesterdayQtyRatio: 0
            };
        },
        methods: {
            getScheduleDateDataRequest(date) {
                if (this.payloadData.workshopId && this.payloadData.processCode) {
                    return productionPrdReportPage({
                        workshopId: this.payloadData.workshopId,
                        processCode: this.payloadData.processCode,
                        auditState: 1,
                        belongDate: date,
                        pageSize: 30,
                        pageNo: 1
                    });
                } else {
                    return new Promise((resolve, reject) => resolve());
                }
            },
            async getDependentData() {
                // 今天
                await this.getScheduleDateDataRequest(formatDate(Date.now())).then(res => {
                    if (res.data.status === 200) {
                        let val = 0;
                        res.data.res.map(x => {
                            val = mathJsAdd(x.shiftQty, val);
                        });
                        this.toDayQty = val;
                    }
                });
                // 昨天
                await this.getScheduleDateDataRequest(formatDate(Date.now() - (24 * 60 * 60 * 1000))).then(res => {
                    if (res.data.status === 200) {
                        let val = 0;
                        res.data.res.map(x => {
                            val = mathJsAdd(x.shiftQty, val);
                        });
                        this.yesterdayQty = val;
                    }
                });
                // 前天
                await this.getScheduleDateDataRequest(formatDate(Date.now() - (2 * 24 * 60 * 60 * 1000))).then(res => {
                    if (res.data.status === 200) {
                        let val = 0;
                        res.data.res.map(x => {
                            val = mathJsAdd(x.shiftQty, val);
                        });
                        this.beforeYesterdayQty = val;
                    }
                });
                // 月
                await this.getScheduleDateDataRequest().then(res => {
                    if (res.data.status === 200) {
                        const arr = res.data.res ? res.data.res.reverse() : [];
                        const obj = {};
                        // 同一个日期的累计起来
                        arr.forEach(x => {
                            if (!obj[x.belongDate]) {
                                obj[x.belongDate] = {
                                    belongDate: x.belongDate,
                                    shiftQty: x.shiftQty,
                                    shiftElectricEnergy: x.shiftElectricEnergy
                                };
                            } else {
                                obj[x.belongDate].shiftQty = parseFloat((obj[x.belongDate].shiftQty + x.shiftQty).toFixed(2));
                                obj[x.belongDate].shiftElectricEnergy = parseFloat((obj[x.belongDate].shiftElectricEnergy + x.shiftElectricEnergy).toFixed(2));
                            }
                        });
                        const newArr = [];
                        for (const key in obj) {
                            newArr.push({
                                belongDate: obj[key].belongDate,
                                shiftQty: obj[key].shiftQty,
                                shiftElectricEnergy: obj[key].shiftElectricEnergy
                            });
                        }
                        this.chartData = newArr;
                    }
                });
                this.yesterdayQtyRatio = this.yesterdayQty ? parseFloat(((this.toDayQty - this.yesterdayQty) / this.yesterdayQty * 100).toFixed(2)) : this.toDayQty ? 100 : 0;
                this.beforeYesterdayQtyRatio = this.beforeYesterdayQty ? parseFloat(((this.toDayQty - this.beforeYesterdayQty) / this.beforeYesterdayQty * 100).toFixed(2)) : this.toDayQty ? 100 : 0;
            }
        },
        watch: {
            payloadData: {
                handler() {
                    this.getDependentData();
                },
                deep: true
            }
        }
    };
</script>
